<template>
    <div id="cart">
        <div class="top">
            <div>30天无忧退货</div>
            <div>48小时快速退款</div>
            <div>满88元免邮费</div>
        </div>
        <div class="carlist">
            <van-swipe-cell class="item" v-for="(item,index) in listData" :key="index">
                <div class="con">
                    <div class="left">
                        <van-checkbox v-model="item.isChecked" checked-color="#b4282d"></van-checkbox>
                        <div class="img">
                            <img :src="item.list_pic_url" alt />
                        </div>
                        <div class="info">
                            <p>{{item.goods_name}}</p>
                            <p>￥{{item.retail_price}}</p>
                        </div>
                    </div>
                    <div class="right">
                        <div class="num">x{{item.number}}</div>
                    </div>
                </div>
                <template #right>
                    <van-button
                        @click="delGoods(item.id,index)"
                        square
                        text="删除"
                        type="danger"
                        style="height:100%"
                        class="delete-button"
                    />
                </template>
            </van-swipe-cell>
            <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="isAllChecked">全选</van-checkbox>
            </van-submit-bar>
        </div>
    </div>
</template>
<script>
import { cartList, deleteAction } from "@/api/cart";
import { Dialog, Toast } from "vant";
import { submitAction } from "@/api/order";
export default {
    data() {
        return {
            listData: [],
            openId: "",
            listIds: [],
        };
    },
    created() {
        this.openId = localStorage.getItem("openId");
        this.getListData();
    },
    methods: {
        //获取购物车列表数据
        async getListData() {
            const data = await cartList({
                openId: this.openId,
            });
            console.log(data.data);
            this.listData = data.data;
        },
        async delGoods(id, index) {
            var that = this;
            Dialog.confirm({
                title: "温馨提示",
                message: "您确定要删除商品吗",
            })
                .then(async () => {
                    const data = await deleteAction({
                        id: id,
                    }).then(() => {
                        that.getListData();
                    });
                    console.log(this.listData);
                })
                .catch(() => {
                    Toast("您取消了删除");
                });
        },
        async onSubmit() {
            var goods = this.listData.filter((el) => el.isChecked);
            console.log(goods);
            if (goods.length == 0) {
                Toast("请选择商品");
                return false;
            }
            //向后台传递订单
            var goodslist = this.listData.map((el) => el.goods_id);
            const data = await submitAction({
                allPrise: this.totalPrice,
                openId: this.openId,
                goodsId: goodslist.join(","),
            });
            console.log(data);
            if (data) {
                this.$router.push("pages/order");
            }
        },
    },
    computed: {
        totalPrice() {
            return (
                this.listData.reduce((total, val) => {
                    if (val.isChecked) {
                        return (total = total + val.number * val.retail_price);
                    } else {
                        return total;
                    }
                }, 0) * 100
            );
        },
        isAllChecked: {
            get() {
                return this.listData.every((e) => e.isChecked == true);
            },
            set(val) {
                this.listData.forEach((e) => (e.isChecked = val));
            },
        },
    },
};
</script>
<style lang="scss" scoped>
#cart {
    background: #f4f4f4;
    height: calc(100vh - 1.33333rem);
    overflow: auto;
    margin-top: 0;
    .top {
        display: flex;
        justify-content: space-between;
        padding: 0.4rem 0.26667rem;
        div {
            background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png)
                0 no-repeat;
            background-size: 0.13333rem;
            padding-left: 0.2rem;
            display: flex;
            align-items: center;
            font-size: 0.33333rem;
            color: #666;
        }
    }
    .carlist {
        background: #fff;
        margin-bottom: 1.46667rem;
        padding: 0 0.26667rem;
        .item {
            padding: 0.26667rem 0;
            border-bottom: 0.01333rem solid #f4f4f4;
            height: 2.21333rem;
            position: relative;
            .con {
                display: flex;
                align-items: center;
                justify-content: space-between;
                transition: all 0.3s ease;
                .left {
                    display: flex;
                    align-items: center;
                    width: 80%;
                    .img {
                        height: 1.66667rem;
                        width: 1.66667rem;
                        margin-left: 0.26667rem;
                        display: block;
                        background: #f4f4f4;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .info {
                        width: 50%;
                        padding: 0.26667rem;
                        p {
                            line-height: 0.53333rem;
                        }
                    }
                }
                .right {
                    padding-right: 0.66667rem;
                }
            }
        }
    }
}
.van-swipe-cell__right {
    right: 0;
    transform: translate3d(100%, 0, 0);
}
.van-submit-bar {
    margin-bottom: 1.333333rem;
}
</style>